﻿{extend name="home_layout" /}
{block name="style"}
<!-- 本页样式表 -->
<link href="__CSS__/timeline.css" rel="stylesheet" />
{/block}
{block name="body"}
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
            <a href="{:url('/')}" title="网站首页">网站首页</a>
            <a href="{:url('/timeline')}" title="点点滴滴">点点滴滴</a>
            <a><cite>时光轴</cite></a>
        </blockquote>
        <div class="blog-main">
            <div class="child-nav shadow">
                <a href="{:url('/timeline')}"><span class="child-nav-btn {eq name="select_id" value="1"}child-nav-btn-this{/eq}">时光轴</span></a>
                <a href="{:url('/web')}"><span class="child-nav-btn {eq name="select_id" value="2"}child-nav-btn-this{/eq}">笔记墙</span></a>
            </div>
            <div class="timeline-box shadow">
                <div class="timeline-main">
                    <h1><i class="fa fa-clock-o"></i>时光轴<span> —— 记录生活点点滴滴</span></h1>
                    <div class="timeline-line"></div>
                        {volist name="contents" id="val"}
                    <div class="timeline-year">
                        <h2><a class="yearToggle" href="javascript:;">{$key}年</a><i class="fa fa-caret-down fa-fw"></i></h2>
                        {volist name="val" id="d"}
                        <div class="timeline-month">
                            <h3 class=" animated fadeInLeft"><a class="monthToggle" href="javascript:;">{$key}月</a><i class="fa fa-caret-down fa-fw"></i></h3>
                           {volist name="d" id="content"}
                            <ul>
                                <li class=" ">
                                    <div class="h4  animated fadeInLeft">
                                        <p class="date">{$content->create_time}</p>
                                    </div>
                                    <p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
                                    <div class="content animated fadeInRight">{$content->content}</div>
                                    <div class="clear"></div>
                                </li>
                            </ul>
                            {/volist}
                        </div>
                        {/volist}
                    </div>
                        {/volist}

                    <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<!-- 本页脚本 -->
<script type="text/javascript">
    layui.use('jquery', function () {
        var $ = layui.jquery;

        $(function () {
            $('.monthToggle').click(function () {
                $(this).parent('h3').siblings('ul').slideToggle('slow');
                $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
            });
            $('.yearToggle').click(function () {
                $(this).parent('h2').siblings('.timeline-month').slideToggle('slow');
                $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
            });
        });
    });
</script>
{/block}